<template>
  <div class="camera-list">
    <div class="camera-item" v-for="(item, index) in VideoList" :key="item.cameraId">
      <VideoPlayer :currentTime="currentTime" :videoUrl="item.wvpUrl" :id="`back_play_${index}`" />
    </div>
  </div>
</template>

<script setup>
  import { ref, onBeforeUnmount } from 'vue';
  import { api } from '/@/api/plat/area.js';
  import { api as playbackApi } from '/@/api/wvp/playback.js';
  import { api as videoApi } from '/@/api/plat/event-video.js';
  import VideoPlayer from '/@/components/video/index.vue';
  import { dateFormat } from '/@/utils/date';

  const props = defineProps({
    alarmInfo: {
      type: Object,
      default: () => {},
    },
  });
  const VideoList = ref([]);
  const currentTime = ref(0);
  let startTime = '';

  function getVideoList(row) {
    startTime = row.startTime;
    videoApi.queryList({ eventId: row.eventId }).then(({ data }) => {
      getVideoRealUrl(data);
    });
  }

  async function getVideoRealUrl(data) {
    let list = [];
    for (let item of data) {
      item.wvpUrl = item.mp4Url + '/' + dateFormat(item.startTime, 'yyyyMMdd') + '/' + item.videoId + '.mp4';
      item.hasAudio = true;
      list.push(item);
    }
    VideoList.value = list;
  }

  function restartPlay(progressTime) {
    const time = parseInt((+new Date(progressTime) - +new Date(startTime)) / 1000);
    currentTime.value = time;
  }

  defineExpose({ getVideoList, restartPlay });
</script>

<style scoped lang="less">
  .camera-list {
    width: 400px;
    height: calc(100% - 30px);
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    .camera-item {
      border: 1px solid #ddd;
      width: 100%;
      aspect-ratio: 16 / 9;
      margin-bottom: 20px;
      background-color: #3336;
    }
  }
</style>
